<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z1 menu" md-component-id="left" md-is-locked-open="$media('gt-md')">

    <md-toolbar>
        <h1 class="md-toolbar-tools">Menu</h1>
    </md-toolbar>
    <md-content layout="column">
        <div layout="column" class="menu-header">
            <h3>Administration</h3>
			<h3>Quarty</h3>
        </div>
        <div layout="column" layout-align="start center" class="menu-actions">
            <md-button ng-href="#/user/create" aria-label="User">
                <md-icon md-svg-src="/assets/icons/grey/user.svg" class="md-small"></md-icon>
                <span>Nouvel utilisateur</span>
            </md-button>
            <md-button ng-href="#/shop/create" aria-label="Shop">
                <md-icon md-svg-src="/assets/icons/grey/home.svg" class="md-small"></md-icon>
                <span>Nouvelle boutique</span>
            </md-button>
            <md-button ng-click="disconnect()" aria-label="Disconnect">
                <md-icon md-svg-src="/assets/icons/grey/times.svg" class="md-small"></md-icon>
                <span>Déconnecter</span>
            </md-button>
        </div>
    </md-content>
</md-sidenav>

<div layout="column" layout-fill tabindex="-1" role="main">

    <md-toolbar class="toolbar md-whiteframe-z1">

        <div class="md-toolbar-tools">

            <md-button aria-label="Toggle Menu" ng-click="openMenu()" hide-gt-md>
                <md-icon md-svg-src="/assets/icons/white/bars.svg" class="md-medium"></md-icon>
            </md-button>

            <div layout flex>
                
                <div class="md-toolbar-item">
                    <md-button ng-click="back()" aria-label="Back">
                        <md-icon md-svg-src="/assets/icons/white/arrow-left.svg" class="md-medium"></md-icon>
                    </md-button>
                    <span hide-sm>Commerce</span>
                </div>

            </div>
        </div>
    </md-toolbar>

    <md-content class="content" md-scroll-y>

        <md-card>
			<md-card-content>

                <div>
                    <img ng-src-cache="{{shop.data.picto.src | mediaScreen}}" alt="picto" />

                    <md-button button-crop src="shop.data.picto.src" out="shop.data.picto.src" ratio="1" width="48" progress="progress" aria-label="Upload" class="md-raised md-accent">
                        <md-icon md-svg-src="/assets/icons/white/plus.svg" class="md-medium"></md-icon>
						<span>icône</span>
                    </md-button>
                </div>

                <div layout>
                    <md-progress-linear md-mode="determinate" value="{{progress}}"></md-progress-linear>
                </div>
        
                <div layout layout-sm="column">

                    <md-input-container flex>
                        <label>Login</label>
                        <input ng-if="!shop.data._id" ng-model="shop.data.login">
                        <input ng-if="shop.data._id" ng-model="shop.data.login" disabled>
                    </md-input-container>
                    
                    <md-input-container flex>
                        <label>Name</label>
                        <input ng-model="shop.data.name">
                    </md-input-container>
                </div>

                <div layout layout-sm="column">

                    <md-input-container flex>
                        <label>Email</label>
                        <input ng-model="shop.data.contact.email" type="email">
                    </md-input-container>

                    <md-input-container flex>
                        <label>Tel</label>
                        <input ng-model="shop.data.contact.tel" type="tel">
                    </md-input-container>
                </div>
        
                <md-autocomplete
                    md-no-cache
                    md-selected-item="shop.data.location"
                    md-search-text="locationText"
                    md-items="item in getLocation(locationText)"
                    md-item-text="item.address"
                    placeholder="Adresse">
                    <span md-highlight-text="locationText">{{item.address}}</span>
                </md-autocomplete>

                <div>
                    <md-select ng-model="shop.data.location.neighborhood" md-on-open="shop.loadCity()">
                        <md-select-label>{{shop.data.location.neighborhood ? shop.data.location.neighborhood : 'Séléctionnez votre quartier'}}</md-select-label>
                        <md-option ng-value="neighborhood.name" ng-repeat="neighborhood in shop.city.neighborhoods">{{neighborhood.name}}</md-option>
                    </md-select>
                </div>

                <div>
                    <md-select ng-model="category" md-on-open="shop.loadGroupCategories()">
                        <md-select-label>Séléctionnez une catégorie</md-select-label>
                        <md-optgroup ng-repeat="category in shop.groupCategories" label="{{category.name}}" >
                            <md-option ng-value="service" ng-repeat="category in category.services">{{service.name}}</md-option>
                        </md-option-group>
                    </md-select>
                </div>

                <div layout layout-align="start center">
                    <div ng-repeat="item in shop.data.categories" layout-padding>
                        <md-button ng-click="removeCategory($index)" aria-label="Remove" class="md-raised md-accent">
                            <span>{{item.name}}</span>
                            <md-icon md-svg-src="/assets/icons/grey/times.svg" class="md-small"></md-icon>
                        </md-button>
                    </div>
                </div>

                <md-autocomplete
                    md-no-cache
                    md-selected-item="employee"
                    md-search-text="employeeText"
                    md-items="item in shop.getEmployeesByLogin(employeeText)"
                    md-item-text="item.login"
                    placeholder="Séléctionnez un employé">
                    <div>
                        <strong md-highlight-text="employeeText">{{item.login}}</strong>
                        <span>{{item.contact.email}}</span>
                        <span hide-sm>({{item.location.city}})</span>
                    </div>
                </md-autocomplete>

                <div layout layout-align="start center">
                    <div ng-repeat="item in shop.data.users.employees" layout-padding>
                        <md-button ng-click="removeEmployee($index)" aria-label="Remove" class="md-raised md-accent">
                            <span>{{item.login}}</span>
                            <md-icon md-svg-src="/assets/icons/grey/times.svg" class="md-small"></md-icon>
                        </md-button>
                    </div>
                </div>

                <div layout="column" vmargin>
                    <div>
                        <md-button button-crop src="shop.data.front.src" out="shop.data.front.src" ratio="800/400" width="800" progress="progress2" aria-label="Upload" class="md-raised md-accent">
                            <md-icon md-svg-src="/assets/icons/white/plus.svg" class="md-medium"></md-icon>
                            <span>Image</span>
                        </md-button>
                    </div>

                    <md-progress-linear md-mode="determinate" value="{{progress2}}"></md-progress-linear>
                </div>

			    <div>
                    <img ng-src-cache="{{shop.data.front.src | mediaScreen}}" alt="front">
                </div>

                <md-input-container flex>
                    <label>Description</label>
                    <textarea ng-model="shop.data.description" md-maxlength="300"></textarea>
                    <md-button ng-click="openBottomSheet($event)" aria-label="Actions" class="md-small md-accent fab-bottom-right">
                        <md-icon md-svg-src="/assets/icons/pink/caret-up.svg" class="md-medium"></md-icon>
                        <span>Actions</span>
                    </md-button>
                </md-input-container>

                <div class="md-actions" layout layout-padding>
                    <span flex></span>
                    <md-button ng-click="shop.save()" class="md-primary" aria-label="Save">Sauver</md-button>
                </div>

            </md-card-content>
        </md-card>

    </md-content>
</div>
